<template>
    <div class="navigation">
        <div class="nav-head">
            <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="input">
            </el-input>
            <el-button type="primary" class="nav-btn" @click="navbtn">查询</el-button>
            <el-input v-model="input2" placeholder="请输入起始位置"></el-input>
            <el-input v-model="input3" placeholder="请输入目标位置"></el-input>
            <el-button type="primary" class="nav-btn" id="navbtn">路线规划</el-button>
        </div>
        <div id="container"></div>
    </div>
</template>

<script>
export default {
    mounted() {
        setTimeout(this.initalMap , 500);     
    },
    data() {
        return {
            input: '',
            input2: '',
            input3: '',
            local: '',
            p1: '',
            p2: '',
            xlng: '',
            ylat: '',
            driving: {},
            start: {},
            end:{a:1},
            map:{}
        };
    },
    methods: {
        addMarker(point, index) {

            var myIcon = new BMapGL.Icon("markers.png", new BMap.Size(23, 25), {
                // 指定定位位置。   
                // 当标注显示在地图上时，其所指向的地理位置距离图标左上    
                // 角各偏移10像素和25像素。您可以看到在本例中该位置即是   
                // 图标中央下端的尖角位置。    
                anchor: new BMapGL.Size(10, 25),
                // 设置图片偏移。   
                // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您   
                // 需要指定大图的偏移位置，此做法与css sprites技术类似。    
                imageOffset: new BMapGL.Size(0, 0 - index * 25)   // 设置图片偏移    
            });
        },
        createFilter(queryString) {
            return (restaurant) => {
                return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
        },
        navbtn() {
            this.local.search(this.input);
        },
        navbtn2() {
            // this.driving.search(this.p1, this.p2);
            // console.log(this.start, this.end);
            // this.driving.search(this.start, this.end);
        },
        handleSelect(item) {

        },
        handleIconClick(ev) {

        },
        initalMap(){
            console.log(this.end);
            this.map = new BMapGL.Map("container");//创建地图实例
            this.start = new BMapGL.Point(
                104.06540102143204, 30.555751851617792);//创建中心点坐标
            this.map .centerAndZoom(this.start, 15); //地图初始化
            // map.setMapStyleV2({
            //     styleId: '84245ca8eca083dcec43f5f532d31172'
            // });
            this.map .enableScrollWheelZoom(true);
            var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
            this.map .addControl(scaleCtrl);
            var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件,map.enableScrollWheelZoom(true);    
            this.map .addControl(zoomCtrl);
            var point = new BMapGL.Point(104.06540102143204, 30.555751851617792);
            var marker = new BMapGL.Marker(point);        // 创建标注 
            this.map .addOverlay(marker);      

            this.map .addEventListener("click", function (e) {//地图点击事件
                let xlng = e.latlng.lng;
                let ylat = e.latlng.lat;
                var start = new BMapGL.Point(104.06540102143204, 30.555751851617792);
                // var end = new BMapGL.Point(xlng, ylat);
                // alert("当前位置：" + e.latlng.lng + ", " + e.latlng.lat);
                let nav = document.querySelector('#navbtn')
                nav.addEventListener('click', function () {
                    console.log('loading');
                    driving.search(this.start, this.end);
                })
            });

            var driving = new BMapGL.DrivingRoute(map, {
                renderOptions: { map: map, autoViewport: false },
                onSearchComplete: function (results) {
                    if (driving.getStatus() != BMAP_STATUS_SUCCESS) {
                        return;
                    }
                },
            });

            var opts = {
                width: 250,     // 信息窗口宽度
                height: 100,    // 信息窗口高度
                title: "当前位置"  // 信息窗口标题
            }
            this.local = new BMapGL.LocalSearch(this.map , {
                renderOptions: { map: this.map  }
            });
            var infoWindow = new BMapGL.InfoWindow("这是你当前所在的位置", opts);  // 创建信息窗口对象
            this.map .openInfoWindow(infoWindow, map.getCenter());        // 打开信息窗口
            this.map .setTrafficOn();                              // 添加交通流量图层


            marker.addEventListener("click", function () {
                this.map .openInfoWindow(infoWindow, map.getCenter());        // 打开信息窗口
            });
            // var local = new BMapGL.LocalSearch(map, {
            //     renderOptions: { map: map }
            // });


            //驾车路线规划
            // this.start = new BMapGL.Point(104.06540102143204, 30.555751851617792);
            // this.end = new BMapGL.Point(x, y);
            // this.driving = new BMapGL.DrivingRoute(map, {
            //     renderOptions: { map: map, autoViewport: true },
            //     onSearchComplete: function (results) {
            //         if (driving.getStatus() != BMAP_STATUS_SUCCESS) {
            //             return;
            //         }
            //         var plan = results.getPlan(0);
            //         output += '总时长：' + plan.getDuration(true);  //获取时间
            //         output += '总路程：' + plan.getDistance(true);  //获取距离
            //     },
            // });

            marker.enableDragging();
            // marker.addEventListener("dragend", function (e) {
            //     this.xlng = e.latlng.lng;
            //     this.ylat = e.latlng.lat
            //     // 创建地址解析器实例
            // })//可以拖走的标注
            this.map .addOverlay(marker);
        }
        },
}
</script>
<style lang="less">
body,
html,
.work {
    height: 100%;
    margin: 0;
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}

.BMap_cpyCtrl {
    display: none;
}

.anchorBL {
    display: none;
}

.nav-head {
    height: 60px;
    text-align: left;

    .el-input {
        width: 200px;
        margin-left: 40px;
    }

    .nav-btn {
        margin-left: 20px;
    }
}

.el-input__inner {
    width: 200px;
}

.navigation {
    height: 100%;

    #container {
        height: 83%;
        width: 96%;
        margin-left: 2%;
    }
}
</style>